<template>
  <div class="home warp">
    <!-- 走马灯组件---轮播图 -->
    <el-carousel height="400px">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <img :src="item.banner" width="100%" height="100%" />
      </el-carousel-item>
    </el-carousel>
    <section class="wrap">
      <!-- 热门课程 -->
      <div class="font">
        <span class="size1" style="margin: 20px">热门课程</span>
        <span style="color: #67c23a"> / </span>
        <span style="color: #67c23a; margin-left: 10px" @click="toAllcourse"
          >全部课程</span
        >
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in courseList" :key="item.id">
          <el-card @click="toCourseDetail(item.id, item.teacherId)">
            <template #header>
              <img :src="item.cover" style="width: 100%; height: 200px" />
            </template>
            <div class="card-content">
              <h3>{{ item.title }}</h3>
              <div class="content-bottom">
                <div>
                  <h3
                    style="font-size: small; color: #67c23a; margin-top: 10px"
                  >
                    ￥免费
                  </h3>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="font">
        <span class="size1" style="margin: 20px">JAVA</span>
        <span style="color: #67c23a"> / </span>
        <span style="color: #67c23a; margin-left: 10px" @click="toAllcourse"
          >全部课程</span
        >
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in courseJavaList" :key="item.id">
          <el-card @click="toCourseDetail(item.id, item.teacherId)">
            <template #header>
              <img :src="item.cover" style="width: 100%; height: 200px" />
            </template>
            <div class="card-content">
              <h3>{{ item.title }}</h3>
              <div class="content-bottom">
                <div>
                  <h3
                    style="font-size: small; color: #67c23a; margin-top: 10px"
                  >
                    ￥免费
                  </h3>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div class="font">
        <span class="size1" style="margin: 20px">H5前端</span>
        <span style="color: #67c23a"> / </span>
        <span style="color: #67c23a; margin-left: 10px" @click="toAllcourse"
          >全部课程</span
        >
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in courseCssList" :key="item.id">
          <el-card @click="toCourseDetail(item.id, item.teacherId)">
            <template #header>
              <img :src="item.cover" style="width: 100%; height: 200px" />
            </template>
            <div class="card-content">
              <h3>{{ item.title }}</h3>
              <div class="content-bottom">
                <div>
                  <h3
                    style="font-size: small; color: #67c23a; margin-top: 10px"
                  >
                    ￥免费
                  </h3>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import axios from "../assets/js/axios";
import { useRouter } from "vue-router";

const router = useRouter();
const bannerList = ref<any>([]);
const courseList = ref<any>([]);
const courseJavaList = ref<any>([]);
  const courseCssList = ref<any>([]);
const currentPage3 = ref(1);
const pageSize3 = ref(8);

const getList = () => {
  axios
    .get("/serviceedu/edu-banner/getPageBatchs", {
      page: 1,
      size: 3,
    })
    .then((res: any) => {
      //轮播图图片列表
      bannerList.value = res.data.list;
      console.log(res.data.list);
    });

  axios
    .get("/serviceedu/edu-course/getHotList", {})
    .then((res: any) => {
      //热门课程列表
      courseList.value = res.data.eduList
      ;
    });
};

axios
  .get("/serviceedu/edu-course/getJavaList", {})
  .then((res: any) => {
    //java课程列表
    courseJavaList.value = res.data.eduList;
  });

  axios
  .get("/serviceedu/edu-course/getCssList", {})
  .then((res: any) => {
    //前端课程列表
    courseCssList.value = res.data.eduList;
  });
getList();

// 点击课程详情
const toCourseDetail = (id: number, teacherId: number) => {
  router.push({
    path: "/courseDetail",
    query: { id: id, teacherId: teacherId },
  });
};
//go to 全部课程
const toAllcourse =()=>{
  router.push("/courseList")
}

</script>

<style scoped lang="less">
.home {
  .font {
    margin: 20px;
    .size1 {
      font-size: xx-large;
    }
  }
  section {
    .el-card {
      margin-bottom: 20px;
      margin-left: 35px;
      h3 {
        font-size: 20px;
      }

      .content-bottom {
        display: flex;
        justify-content: space-between;

        span {
          font-size: 14px;
          color: #cccccc;
        }
      }

      .card-header {
        text-align: center;

        h4 {
          font-size: 20px;
          color: greenyellow;
        }

        p {
          color: #cccccc;
        }
      }
    }
  }
}
</style>
